.index {
  padding: 40rpx 30rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;

  .header {
    text-align: center;
    margin-bottom: 60rpx;

    .title {
      display: block;
      font-size: 48rpx;
      font-weight: bold;
      color: #fff;
      margin-bottom: 16rpx;
    }

    .subtitle {
      display: block;
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.8);
    }
  }

  .query-section {
    background: #fff;
    border-radius: 20rpx;
    padding: 40rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);

    .query-type-selector {
      display: flex;
      margin-bottom: 40rpx;
      border-radius: 12rpx;
      overflow: hidden;
      border: 2rpx solid #667eea;

      .query-btn {
        flex: 1;
        background: transparent;
        border: none;
        padding: 20rpx 0;
        font-size: 26rpx;
        color: #667eea;
        border-radius: 0;

        &.active {
          background: #667eea;
          color: #fff;
        }

        &::after {
          border: none;
        }
      }
    }

    .input-section {
      margin-bottom: 40rpx;

      .input-label {
        display: block;
        font-size: 28rpx;
        color: #333;
        margin-bottom: 16rpx;
        font-weight: 500;
      }

      .input-field {
        border: 2rpx solid #e1e5e9;
        border-radius: 12rpx;
        padding: 24rpx;
        font-size: 28rpx;
        background: #f8f9fa;

        &:focus {
          border-color: #667eea;
          background: #fff;
        }
      }
    }

    .calculate-btn {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #fff;
      border: none;
      border-radius: 12rpx;
      padding: 24rpx 0;
      font-size: 32rpx;
      font-weight: bold;

      &::after {
        border: none;
      }
    }

    .result-section {
      margin-top: 40rpx;
      padding: 30rpx;
      background: #f8f9fa;
      border-radius: 12rpx;
      border-left: 6rpx solid #667eea;

      .result-label {
        display: block;
        font-size: 28rpx;
        color: #666;
        margin-bottom: 16rpx;
      }

      .result-text {
        display: block;
        font-size: 36rpx;
        color: #333;
        font-weight: bold;
      }
    }
  }

  .examples-section {
    margin-top: 40rpx;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20rpx;
    padding: 30rpx;

    .examples-title {
      display: block;
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
      margin-bottom: 20rpx;
    }

    .example {
      display: block;
      font-size: 26rpx;
      color: #666;
      margin-bottom: 12rpx;
      line-height: 1.6;
    }
  }
}